<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./css/swiper-bundle.min.css" />
    <link rel="stylesheet" href="./css/common.css" />
    <link rel="stylesheet" href="./css/header.css" />
    <link rel="stylesheet" href="./css/index.css" />
    <link rel="stylesheet" href="./css/footer.css" />
    <script src="./js/jquery-3.6.0.min.js"></script>
  </head>
  <body>
    <!-- 主导航开始 -->
    <div class="header">
      <div class="header-in">
        <!-- logo -->
        <div class="logo">
          <img src="./images/logo_03.png" alt="" />
          <div class="flag-word">
            <strong>蓝莓派</strong>
            <h3>和音乐一起分享时光</h3>
          </div>
        </div>

        <!-- 主导航 -->
        <div class="main-nav">
          <ul>
            <li><a class="navs on" href="./index.html">首页</a></li>
            <li><a class="navs" href="./yuezhang.html">乐章</a></li>
            <li>
              <span class="ts-num">12</span
              ><a class="navs" href="./tingshuo.html">听说</a>
            </li>
            <li><a class="navs" href="./chat.html">聊聊</a></li>
            <li><a class="navs" href="./chengpin.html">诚品</a></li>
            <li><a class="navs" href="./blueberryjam.html">蓝莓酱</a></li>
          </ul>
        </div>

        <!-- 搜索和登录注册 -->
        <div class="login">
          <div class="search">
            <form>
              <input type="search" id="search" />
              <label for="search" id="search-button"></label>
            </form>
          </div>
          <div class="login-register">
            <a href="./login.html" class="login">登录</a>
            <a href="./login.html" class="register">注册</a>
          </div>
        </div>
      </div>
    </div>
    <!-- 主导航结束 -->

    <!-- 轮播图开始 -->
    <div class="swiper">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <div class="s-content s1">
            <div class="text">
              <h3></h3>
              <p></p>
            </div>
          </div>
        </div>
        <div class="swiper-slide">
          <div class="s-content s2">
            <div class="text">
              <h3></h3>
              <p></p>
            </div>
          </div>
        </div>
        <div class="swiper-slide">
          <div class="s-content s3">
            <div class="text">
              <h3></h3>
              <p></p>
            </div>
          </div>
        </div>
      </div>
      <div class="swiper-pagination"></div>
    </div>
    <!-- 轮播图结束 -->

    <!-- 内容模块开始 -->
    <div class="main">
      <!-- 乐章开始 -->
      <div class="product">
        <a href="#" class="p-title">
          <span class="p-title-l">乐章</span>
          <div class="icon">
            <img src="./images/yuezhangIcon_05.png" alt="" />
            <span class="p-title-t">MOVEMENT</span>
          </div>
        </a>
        <div class="p-details">
          <ul class="d-list">
            <!-- <li class="d-item">
              <div class="item-img">
                <a href="#">
                  <img src="./images/yuezhangPic_05.png" alt="" />
                </a>
              </div>
              <div class="item-text">
                <a href="#" class="text-title">我是第一篇</a>
                <a href="#" class="text-author">小夏同学</a>
                <p class="text-content">
                  hi哦文化的客户打开拉萨街道上的付款计划
                  服务i挂号费科技文化服务器 服务和反馈、 fweugfweugf
                </p>
                <div class="comment">
                  <i class="zan-num">20</i>
                  <i class="zan-icon"></i>
                  <i class="comment-num">40</i>
                  <i class="comment-icon"></i>
                </div>
              </div>
            </li> -->
          </ul>
        </div>
      </div>
      <!-- 乐章结束 -->

      <!-- 游记开始 -->
      <div class="product">
        <a href="#" class="p-title">
          <span class="p-title-l">游记</span>
          <div class="icon">
            <img src="./images/youjiIcon_38.png" alt="" />
            <span class="p-title-t">YOUJI</span>
          </div>
        </a>
        <div class="p-details">
          <ul class="note-list">
            <!-- <li class="note">
              <a href="#">
                <img src="./images/youji_38.png" alt="" />
                <p class="note-title">二位开放后i阿尔会发生纠纷和</p>
                <p class="note-author">阿松</p>
                <div class="note-desc">
                  <p class="note-desc-content">具有高度风格化付款啦时间</p>
                </div>
              </a>
            </li> -->
          </ul>
        </div>
      </div>
      <!-- 游记结束 -->
    </div>
    <!-- 内容模块结束 -->

    <!-- 底部开始 -->
    <div class="footer">
      <div class="blin-content">
        <div class="link-left">
          <span>友情链接</span>
          <p class="link-left-content">
            <a href="#">乐视</a>
            <a href="#">数字尾巴</a>
            <a href="#">豆瓣</a>
            <a href="#">环球旅游</a>
            <a href="#">环球旅游</a>
            <a href="#">环球旅游</a>
            <a href="#">环球旅游</a>
            <a href="#">环球旅游</a>
            <a href="#">环球旅游</a>
            <a href="#">环球旅游</a>
          </p>
        </div>
        <div class="link-right">
          <div class="weibo">
            <img src="./images/footer-ewm1.jpg" alt="" />
            <span>微博二维码</span>
          </div>

          <div class="weixin">
            <img src="./images/footer-ewm2.jpg" alt="" />
            <span>微信二维码</span>
          </div>

          <div class="connect">
            <p>电话：88888888</p>
            <p><i>邮编：100100</i><i>传真：898888888</i></p>
            <p>邮箱：info@newworlrours.cn</p>
            <p>地址：不会告诉你的</p>
          </div>
        </div>
      </div>

      <div class="bottom">
        <div class="bot-content">
          <span><a href="#">关于我们</a></span>
          <span><a href="#">联系我们</a></span>
          <span><a href="#">加入我们</a></span>
          <span><a href="#">团队成员</a></span>
          <span><a href="#">商务合作</a></span>
          <p class="bot-footer"><em>蓝莓派版权所有</em><em>备案号</em></p>
        </div>
      </div>
    </div>
    <!-- 底部结束 -->

    <script src="./js/swiper-bundle.min.js"></script>
    <script src="./js/index.js"></script>
  </body>
</html>
